<template>
  <div class="mine">
    <div class="minetop">
      <span class="photobox">
        <img :src="userinfodata.avatar_img" alt="" class="photo">
        <span class="topname">
          <span>{{userinfodata.wx_name}}</span>
          <span style="font-size:12px;" v-if="userinfodata.role == 2">邀请码：{{userinfodata.invitation}}</span>
        </span>
      </span>
      <span class="iconbox">
        <img src="../assets/img/m_9.png" alt="" @click="generate">
        <img src="../assets/img/m_1.png" alt="" @click="showshadow = true">
        <img src="../assets/img/m_2.png" alt="" @click="onMess">
      </span>
    </div>
    <div class="minecenter">
      <div class="moneybox">
        <span class="num">{{userinfodata.task_num}}</span>
        <span class="numtext">完成单数</span>
      </div>
      <div class="moneybox" @click="onDeposit">
        <span class="num">{{userinfodata.y_money}}</span>
        <span class="numtext">佣金金额</span>
      </div>
      <div class="moneybox another" @click="onFather">
        <span class="num">{{userinfodata.b_money}}</span>
        <span class="numtext">师傅佣金</span>
      </div>
    </div>
    <div class="minefoot">
      <van-cell title="平台通知" icon="volume-o" is-link to="notice"/>
      <van-collapse v-model="activeNames">
        <van-collapse-item title="我的金库" name="1" icon="balance-pay">
          <div class="mymoney">
            <span style="margin-bottom:10px;">
              <img src="../assets/img/m_1.jpg" alt="" @click="onDeposit">
              <img src="../assets/img/m_2.jpg" alt="" @click="onFill">
            </span>
            <span>
              <img src="../assets/img/m_3.jpg" alt="" @click="$router.push('/detail')">
              <!--<img src="../assets/img/m_4.jpg" alt="" @click="$router.push('/filling')">-->
              <img src="../assets/img/m_4.jpg" alt="" @click="$toast('暂无补单功能！')">
            </span>
          </div>
        </van-collapse-item>
      </van-collapse>
      <van-cell title="徒弟" icon="setting-o" is-link to="activity"/>
      <van-cell title="申诉中心" icon="warning-o" is-link to="complaint"/>
      <van-cell title="客服中心" icon="phone-o" is-link to="feedback"/>
      <van-cell title="我的资料" icon="notes-o" is-link to="profile"/>
      <van-cell title="排行榜" icon="diamond-o" is-link to="ranking"/>
      <!-- <van-cell title="绑定旺旺" icon="diamond-o" is-link to="bindww"/> -->
      <!-- <van-cell title="邀请徒弟" icon="cluster-o" is-link to="invite"/> -->
    </div>
    <van-dialog v-model="fillDialog" title="补单" show-cancel-button @confirm="onConfirm" @cancel="onCancel">
      <van-field v-model="fillval" clearable label="补单金额" left-icon="gold-coin" placeholder="请输入补单金额"/>
    </van-dialog>
    <van-popup v-model="showshadow" round>
      <div class="shadow" >
        <!-- <div class="startBtn" @click="onopen">开启提醒</div> -->
        <div class="startBtn" @click="handleFocus">开启提醒</div>
      </div>
    </van-popup>
    <van-popup v-model="show_img" round>
      <img :src="generate_img" alt="">
    </van-popup>
    <!-- <van-popup v-model="remindDialog" round :close-on-click-overlay="false">
      <div class="remindtop" >
        <div class="top">
          <img src="../assets/img/tipbg.png" alt="">
        </div>
        <p class="succ">开启成功！</p>
        <p class="remindtext">请点击下方按钮关注公众号，接收活动消息</p>
        <div class="startBtn" @click="handleFocus">立即关注</div>
      </div>
    </van-popup> -->
    <return></return>
    <AgainReturn></AgainReturn>
    <Footer></Footer>
  </div>
</template>
<script>
import { getuserinfo,remindaddress,generate_img } from '../api/api';
import Footer from '../components/footer.vue'
import aestool from '@/utils/aestool.js';
import Return from "./Return";
import AgainReturn from "./AgainReturn";
export default {
  components:{AgainReturn, Return, Footer },
  data(){
    return{
      active:0,
      activeNames: ['0'],
      fillDialog:false,
      fillval:'',
      showshadow:false,
      userinfodata:{},
      remindDialog:false,
      generate_img:'',
      show_img:false,
    }
  },
  created(){
    this.getUserData()
    // if(this.$route.query.code){
    //   sessionStorage.setItem('token',this.$route.query.t)
    //   let open = this.$route.query.code
    //   open == 1 ? this.remindDialog = true : open == 3 ? this.$toast('请使用同一个微信号授权!') : this.$toast('更新开通失败，请联系客服!')
    // }
  },
  methods:{
    //获取用户信息
    getUserData(){
      getuserinfo().then(res=>{
        console.log('用户信息',res)
        if(res.data.Status == 200){
          sessionStorage.setItem('useinfo',aestool.decrypt(res.data.Data,'123456asdzxcqwe0'))
          this.userinfodata = JSON.parse(aestool.decrypt(res.data.Data,'123456asdzxcqwe0'))
          console.log('userdata',this.userinfodata)
        }
      })
    },
    generate(){
      generate_img().then(res=>{
        if (res.Status!=400) {
          this.generate_img =res
          this.show_img =true
        }else{
          this.$toast(res.Message)
        }
      })
    },
    onMess(){
      console.log('this.userinfodata.user_status',this.userinfodata.user_status)
      if(this.userinfodata.user_status == 1){
        this.$router.push('/uploadImg')
      }else if(this.userinfodata.user_status == 2){
        this.$toast('资料已完善！')
      }else if(this.userinfodata.user_status == 3){
        this.$toast('账户已冻结！')
      }else if(this.userinfodata.user_status == 4){
        this.$toast('资料正在审核中！')
      }
    },
    //生成随机数
    getNum(){
      var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
      var nums=""
      for(var i=0;i<16;i++){
        var id = parseInt(Math.random()*61);
        nums+=chars[id];
      }
      return nums
    },
    //补单
    onFill(){
      // this.fillDialog = true
      this.$toast('暂无补单功能！')
    },
    //确认补单
    onConfirm(){
      if(this.fillval == ''){
        this.$toast('补单金额不能为空！')
      }else{

      }
    },
    //取消补单
    onCancel(){
      this.fillDialog = false
    },
    //开启提醒
    onopen(){
      let str = this.getNum()
      let params = {
        authorized:aestool.encrypt('remind_begin',str),
        authorized_s:aestool.encrypt(str,'123Remindaddress'),
      }
      remindaddress(params).then(res=>{
        let temp = aestool.decrypt(res.Data,'123Remindaddress')
        console.log('开启',temp)
        window.location.href = temp
      })
    },
    //佣金提现
    onDeposit(){
      if(this.userinfodata.y_money <= 0){
        this.$toast('暂无可提现佣金!')
      }else{
        let item = {
          task_yjmoney:this.userinfodata.y_money
        }
        this.$router.push({
          name: 'withdrawal',
          params: {
            type:'YJ',
            task: item
          }
        })
      }
    },
    onFather(){
      if(this.userinfodata.b_money <= 0){
        this.$toast('暂无可体现佣金!')
      }else{
        let item = {
          task_yjmoney:this.userinfodata.b_money
        }
        this.$router.push({
          name: 'withdrawal',
          params: {
            type:'SFYJ',
            task: item
          }
        })
      }
    },
    handleFocus(){
      window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIzMjE3NTE3NA==&scene=124#wechat_redirect'
    }
  }
}
</script>

<style lang="stylus" scoped>
.mine{
  // height 100%
  font-size 12px
  padding-bottom 50px
  .minetop{
    height 128px
    background url(../assets/img/minetop.jpg) no-repeat top center
    background-size cover
    display flex
    justify-content space-between
    align-items center
    padding 0 16px
    .photobox{
      display flex
      align-items center
      .topname{
        display flex
        flex-direction column
        color #fff
      }
      img{
        width 60px
        height 60px
        border 3px solid #ffffff
        border-radius 50%
        margin-right 10px
      }
      span{
        font-size 16px
      }
    }
    .iconbox{
      img{
        width 20px
        height 20px
        margin:0 6px
      }
    }
  }
  .minecenter{
    display flex
    justify-content space-between
    align-items center
    padding 20px 0
    .moneybox{
      width 30%
      border-right 1px solid #ececec
      display flex
      flex-direction column
      align-items center
      padding 0 20px
      .num{
        font-size 20px
        color #333
        font-weight 600
        margin-bottom 10px
      }
      .numtext{
        font-size 16px
        color #9a9a9a
      }
    }
    .another{
      border-right 0
    }
  }
  .minefoot{
    .mymoney{
      padding 0 10px
      display flex
      flex-direction column
      span{
        display flex
        justify-content space-between
        align-items center
      }
      img{
        width 150px
        height 86px
      }
    }
  }
  .shadow{
    width 300px
    height 380px
    background url(../assets/img/remind.png) no-repeat top center
    background-size cover
    .startBtn{
      height 40px
      background-image linear-gradient(to right, #3b5bea , #5786ff)
      text-align center
      line-height 40px
      color #ffffff
      font-size 16px
      position absolute
      bottom 20px
      margin:0 25px
      width 250px
      border-radius 20px
    }
  }
  .remindtop{
    height 300px
    .top{
      width 300px
      height 130px
      img{
        width 100%
      }
    }
    .succ{
      text-align center
      font-size 26px
      color #2e4eca
      padding 16px 0
    }
    .remindtext{
      text-align center
      color #666
      font-size 14px
    }
    .startBtn{
      height 40px
      background-image linear-gradient(to right, #3b5bea , #5786ff)
      text-align center
      line-height 40px
      color #ffffff
      font-size 16px
      position absolute
      bottom 20px
      margin:0 25px
      width 250px
      border-radius 20px
    }
  }
}
</style>
<style lang="stylus">
.mine{
  .van-tabbar--fixed{
    position relative
  }
  [class*=van-hairline]::after{
    border 0
  }
  .van-cell:not(:last-child)::after{
    border 0
  }
}
</style>

